<template>
  <div class="login">
    <div class="container">
      <a href="/#/index"><img src="https://cdn.jsdelivr.net/gh/ZTY18873242003/img/优雅的使用图床/login-logo.png" alt=""></a>
    </div>
    <div class="wrapper">
      <div class="container">
        <div class="login-form">
          <h3>
            <span style="cursor:pointer" @click="$router.push('/login')">帐号登录</span>
            <span class="sep-line">|</span><span class="checked">验证码登录</span>
          </h3>

          <div class="input">
            <el-input type="text" class="inputs" placeholder="请输入手机号" v-model="phone" autocomplete="off"></el-input>
          </div>
          <!--          <div class="input">-->
          <!--            <input type="text" placeholder="请输入帐号" v-model="username">-->
          <!--          </div>-->

          <div class="input">
            <el-input type="text" v-model="code" placeholder="请输入验证码" autocomplete="off"></el-input>
            <el-button type="text"
                       class="codebtn"
                       :disabled="sendDisabled"
                       @click="sendCode"
            >{{ codeText }}
            </el-button>
          </div>
          <!--          <div class="input">-->
          <!--            <input type="password" placeholder="请输入密码" v-model="password">-->
          <!--          </div>-->
          <div class="btn-box">
            <a href="javascript:;" class="btn" @click="login">登录</a>
          </div>
          <div class="tips">
            <div class="sms">收不到验证码?</div>
            <div class="sms" @click="$router.push('/login')"><span></span>密码登陆</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import {mapActions} from 'vuex'
import lvaild from '../util/lvalid'

export default {
  name: 'PhoneLogin',
  data() {
    return {
      phone: '',
      code: '',
      status: '',
      codeText: '获取验证码',
      sendDisabled: false
    }
  },
  methods: {
    ...mapActions(['saveUserName', 'saveCartCount']),
    //发送验证码
    async sendCode() {
      var that = this;
      if (this.phone == "" || !lvaild.checkMobile(this.phone)) {
        this.$message.error('请输入正确的手机号码！');
        return
      }
      this.$axios.get('/validateCode/send4Login', {
        params: {
          'phone':this.phone,
        }
      }).then((result) => {
        if (result.status == 400) {
          this.$message.error(result.msg);
          return
        } else {
          this.$message.success(result.msg);
          let timerNum = 60;
          this.sendDisabled = true;
          let timer = setInterval(function () {
            if (timerNum <= 0) {
              that.codeText = "发送验证码";
              clearInterval(timer);
              that.sendDisabled = false;
            } else {
              that.codeText = timerNum + "秒后重新获取";
              timerNum--;
            }
          }, 1000);
        }
      })

    },
    login() {
      const {phone, code} = this
      var that = this
      this.$axios.post('/login/UserLoginByPhone?phone='+phone+'&code='+code,
      ).then((res) => {
        if (res.status === 200) {
          // this.$store.state.token=JSON.stringify(res.data.token);
          // this.$store.state.username=this.username;
          let username = ''
          if(res.data.username){
            username = res.data.username
          }else {
            username = '用户_a00381'
          }
          sessionStorage.setItem("username", username);
          sessionStorage['token'] = JSON.stringify(res.data.token)
          that.$router.push({
            // path:'/index'对应路由起的name:index
            // 【注：用params传参必须使用name跳转路由；而用query传参必须使用path跳转路由】
            name: 'index',
            params: {
              from: 'login'
            }
          })
        } else if (res.status === 2007) {
          this.$message.error('密码错误');
        } else if (res.status === 2008) {
          this.$message.error('无此用户，请重新输入正确用户名');
        } else {
          this.$message.error('123');
        }
        /**
         * 保存购物车数量，不在这里做（axios里套axios），改成跳转到/index页面里判断是否是login页面跳转过来的，是则请求购物车数量
         * this.axios.get('/carts/products/sum').then((res) => {
         * this.saveCartCount(res)
         * })
         */

      })
    },
  }
}
</script>
<style lang="scss">
.login {
  & > .container {
    height: 113px;

    img {
      width: auto;
      height: 100%;
    }
  }

  .codebtn {
    border: 0;
    position: absolute;
    top: 194px;
    right: 30px;
    font-weight: 500;
    color: #FF6600;
    line-height: 15px;
    cursor: pointer;
    padding: 10px;
    //border-left: 1px solid #FF6600;
  }

  .wrapper {
    background: url('https://cdn.jsdelivr.net/gh/ZTY18873242003/img/优雅的使用图床/login-bg2.jpg') no-repeat center;

    .container {
      height: 576px;

      .login-form {
        box-sizing: border-box;
        padding-left: 31px;
        padding-right: 31px;
        width: 410px;
        height: 510px;
        background-color: #ffffff;
        position: absolute;
        bottom: 29px;
        right: 0;

        h3 {
          line-height: 23px;
          font-size: 24px;
          text-align: center;
          margin: 40px auto 49px;

          .checked {
            color: #FF6600;
          }

          .sep-line {
            margin: 0 32px;
          }
        }

        .input {
          display: inline-block;
          width: 348px;
          height: 50px;
          border: 1px solid #E5E5E5;
          margin-bottom: 20px;

          input {
            width: 100%;
            height: 100%;
            border: none;
            padding: 18px;
          }
        }

        .btn {
          width: 100%;
          height: 50px;
          line-height: 50px;
          margin-top: 10px;
          font-size: 16px;
        }

        .tips {
          margin-top: 14px;
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          cursor: pointer;

          .sms {
            color: #FF6600;
          }

          .reg {
            color: #999999;

            span {
              margin: 0 7px;
            }
          }
        }
      }
    }
  }

  .footer {
    height: 100px;
    padding-top: 60px;
    color: #999999;
    font-size: 16px;
    text-align: center;

    .footer-link {
      a {
        color: #999999;
        display: inline-block;
      }

      span {
        margin: 0 10px;
      }
    }

    .copyright {
      margin-top: 13px;
    }
  }
}
</style>
